<template>
  <div class="detail">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/post' }">旅游攻略</el-breadcrumb-item>
      <el-breadcrumb-item>攻略详情</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 详情 -->
    <div class="cons">
      <div class="main">
        <div class="content" v-if="article.title">
          <div class="content_title">
            <h2 class="title">{{ article.title }}</h2>

            <span class="author">
              <div class="img">
                <img
                  alt=""
                  :src="$axios.defaults.baseURL + article.account.defaultAvatar"
                />
              </div>
              {{ article.account.nickname }}</span
            >
            <br />
            <span class="time">发布于:&nbsp;{{ article.city.created_at }}</span>
            <span class="read"
              ><i class="el-icon-view"></i> {{ article.watch }} 浏览</span
            >
          </div>
          <div class="content_body" v-html="article.content"></div>
          <div class="info">
            <span><i class="el-icon-s-comment"></i>评论({{ total }})</span>
            <span>
              <i class="el-icon-share" @click="handelShare"></i>分享
            </span>
          </div>
          <!-- 评论 -->
          <div class="comment">
            <h4>发表评论</h4>
            <div class="comment_info">
              <div class="call" ref="close">
                <span ref="call"></span>
                <span class="close" @click="handlerClose">X</span>
              </div>
              <div class="left"><img src="@/assets/xianyun.gif" alt="" /></div>
              <div class="right">
                <textarea
                  id="conment_text"
                  name="comment_text"
                  rows="5"
                  ref="comment_text"
                  placeholder="说两句，撩一撩..."
                ></textarea>
                <!-- names属性是上传的文件字段名 这里上传图片暂时关闭了token的验证 -->
                <el-form ref="postForm" :model="postForm" label-width="80px">
                  <el-upload
                    :action="$axios.defaults.baseURL + '/upload'"
                    list-type="picture-card"
                    name="files"
                    :on-success="handlerSuccess"
                    :on-remove="handleRemove"
                    :file-list="postForm.cover"
                  >
                    <i class="el-icon-plus"></i>
                  </el-upload>
                </el-form>
              </div>
            </div>
            <div class="comment_btn" @click="handlerClick">
              <div class="btn">
                <el-button>提交</el-button>
              </div>
            </div>
            <div class="no_comments" v-if="comments.length == 0">
              暂无评论，赶紧来撸两句...
            </div>
            <div class="comments" v-else>
              <div class="comment_content" v-for="(v, i) in comments" :key="i">
                <!--评论组件 -->
                <PostComment :commentList="v" @click="handlerReply" />
              </div>
              <!-- 分页 -->
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageIndex"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
      <!-- 相关攻略 -->
      <div class="relative">
        <Recommend @click="dealJump" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      article: "",
      comments: "",
      id: "",
      pageIndex: 0,
      pageSize: 5,
      fileList: [],
      follow: null,
      total: 0,
      postForm: { cover: [] },
    };
  },
  methods: {
    //侧边栏的点击
    dealJump(v) {
      // 整个推荐文章的数据传过来  拿到文章id  发起文章数据请求 渲染页面
      console.log(v.id, 123);
      this.id = v.id;
      this.$axios({
        url: "/posts",
        params: { id: this.id },
      }).then((res) => {
        console.log(res, "推荐文章详情");
        this.article = res.data.data[0];
        console.log(this.article);
      });
      // 刷新评论数据
      setTimeout(() => {
        this.pageIndex = 0;
        this.pageSize = 5;
        this.getPublishComment(this.id, this.pageIndex, this.pageSize);
      }, 1);
    },
    //获取评论封装
    getPublishComment(id, pageIndex, pageSize) {
      this.$axios({
        url: "/posts/comments",
        params: { post: id, _start: pageIndex, _limit: pageSize },
      }).then((res1) => {
        console.log(res1, "文章评论");
        this.comments = res1.data.data;
        this.total = res1.data.total;
        console.log(this.comments, this.total);
      });
    },
    // 发表评论封装
    publishComments(id, followId) {
      //处理评论开头不能空格以及不为空的优化
      const num = this.$refs.comment_text.value.indexOf(" ");
      if (!this.$refs.comment_text.value || num == 0) {
        this.$message.closeAll();
        this.$message.error("文章评论内容不能为空");
        return;
      }

      this.$axios({
        method: "post",
        url: "/comments",
        headers: {
          Authorization: "Bearer " + this.$store.state.user.userInfo.token,
        },
        data: {
          post: id,
          content: this.$refs.comment_text.value,
          pics: this.postForm.cover,
          follow: followId,
        },
      })
        .then((res3) => {
          console.log(res3, "发表文章评论");
        })
        .then((res5) => {
          this.$message.success("文章评论成功");
          this.pageIndex = 0;
          this.pageSize = 5;
          this.getPublishComment(id, this.pageIndex, this.pageSize);
          this.$refs.call.innerHTML = "";
          this.$refs.close.style.display = "none";
          this.$refs.comment_text.value = "";
          this.follow = null;
          // 发布成功后清空数组 图片上传 file-list属性绑定的值
          this.postForm.cover = [];
          this.getPublishComment(this.id, this.pageIndex, this.pageSize);
        });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getPublishComment(this.id, this.pageIndex, this.pageSize);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageIndex = val - 1;
      this.getPublishComment(this.id, this.pageIndex, this.pageSize);
    },
    // 图片上传成功后的回调
    handlerSuccess(response, file, fileList) {
      console.log(response, file, fileList);

      this.postForm.cover.push({
        id: response[0].id,
        url: this.$axios.defaults.baseURL + response[0].url,
      });

      // console.log(this.fileList, 1234566);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
      this.postForm.cover = this.postForm.cover.filter((v, i) => {
        return v.id !== file.id;
      });
    },
    handlerReply(data) {
      console.log(data);
      this.$refs.close.style.display = "block";
      this.$refs.call.innerHTML = `回复@${data.account.nickname}`;
      this.follow = data.id;
      console.log(this.follow, 111);
    },
    handlerClose() {
      this.$refs.call.innerHTML = "";
      this.$refs.close.style.display = "none";
      this.follow = null;
    },

    handelShare() {
      this.$message.closeAll();
      this.$message.warning("暂时不支持分享,请见谅");
    },
    // 发布评论
    handlerClick() {
      // 将当前path存储到store,以备不时之需
      // this.$store.commit("user/setBackurl2", location.href);
      console.log(this.id);
      this.publishComments(this.id, this.follow);

      // console.log(this.id);
      // console.log(this.$refs.comment_text.value);
      // http:127.0.0.1:1337/comments     COMMENT - 提交评论 post请求
      // this.$axios({
      //   method: "post",
      //   url: "/comments",
      //   headers: {
      //     Authorization: "Bearer " + this.$store.state.user.userinfo.token
      //   },
      //   data: {
      //     post: this.id,
      //     content: this.$refs.comment_text.value,
      //     pics: this.fileList
      //   }
      // }).then(res3 => {
      //   console.log(res3, "发表文章评论");
      // });
    },
    // getToken() {
    //   return {
    //     Authorization: "Bearer " + this.$store.state.user.userinfo.token
    //   };
    // }
  },
  mounted() {
    // console.log(this.$route.query.id);
    // 获取文章详情
    // http:127.0.0.1:1337/posts get方式 参数id 文章id
    this.id = this.$route.query.id;
    console.log(this.id);

    this.$axios({
      url: "/posts",
      params: { id: this.id },
    }).then((res) => {
      console.log(res, "文章详情");
      this.article = res.data.data[0];
      console.log(this.article);
    });
    // POSTS - 获取文章评论 http:127.0.0.1:1337/posts/comments get方式
    // 参数:post 文章id _sort:排序  _limit:条数 _start:开始数据（分页）
    //  _start: this.pageIndex, _limit: this.pageSize
    // this.$axios({
    //   url: "/posts/comments",
    //   params: { post: this.id }
    // }).then(res1 => {
    //   console.log(res1, "文章评论");
    //   this.comments = res1.data.data;
    // 获取评论
    this.getPublishComment(this.id, this.pageIndex, this.pageSize);

    //处理图片封面
    this.postForm.cover = this.postForm.cover.map((v) => {
      if (v.url.indexOf("http") == -1) {
        v.url = this.$axios.defaults.baseURL + v.url;
      }
      return v;
    });

    // });
  },
};
</script>

<style lang="less" scoped>
.detail {
  width: 1000px;
  margin: 0 auto;
  padding-top: 20px;
  .cons {
    display: flex;
    .content {
      width: 700px;
      .content_title {
        text-align: right;
        .title {
          text-align: left;
          padding: 20px 0;
          margin-bottom: 10px;
          font-size: 32px;
          border-bottom: 1px solid #ddd;
        }

        .img {
          position: absolute;
          left: -40px;
          top: -10px;
          padding: 3px;
          width: 30px;
          height: 30px;
          line-height: 30px;
          > img {
            width: 30px;
            height: 30px;
            vertical-align: middle;
            border-radius: 50%;
            border: 1px solid #ccc;
          }
        }
        .author {
          position: relative;
          display: inline-block;
          margin-right: 0px;
          padding: 1px;
          color: orange;
          font-size: 16px;
          margin: 5px 0;
        }
        .time,
        .read {
          margin-right: 10px;
          font-size: 14px;
          color: #ccc;
        }
      }

      .content_body {
        max-width: 700px;
        padding: 15px 0;

        /deep/img {
          max-width: 700px;
        }
      }
      .info {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 15px 0;

        span {
          display: flex;
          cursor: pointer;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          margin-right: 20px;
          color: #ccc;
          font-size: 14px;
          i {
            font-size: 36px;
            color: orange;
          }
        }
      }
    }
  }
  .comment {
    .comment_info {
      position: relative;
      display: flex;
      padding: 10px 0;
      .call {
        display: none;
        position: absolute;
        left: 98px;
        top: -20px;
        padding: 2px 10px;
        line-height: 20px;
        color: blue;
        font-size: 14px;
        background-color: #ddd;
        border-radius: 10px;
        cursor: pointer;
        .close {
          text-align: right;
          width: 15px;
          height: 15px;
        }
      }
      .left {
        width: 90px;
        margin-right: 10px;
        > img {
          overflow: hidden;
          width: 80px;
          height: 80px;
          border: 1px solid #ccc;
          border-radius: 50%;
        }
      }
      .right {
        position: relative;
        #conment_text {
          resize: none;
          min-height: 100px;
          width: 600px;
          padding: 8px;
          border: 1px solid #ccc;
          outline: 0 none;
        }
      }
      /deep/.el-upload--picture-card {
        position: absolute;
        left: 3px;
        bottom: -50px;
        width: 50px;
        height: 50px;
        line-height: 50px;
      }
    }
    .comment_btn {
      text-align: right;

      /deep/.el-button--default {
        background: orange;
        color: #fff;
      }
    }
    .no_comments {
      width: 700px;
      height: 70px;
      line-height: 70px;
      margin: 10px;
      text-align: center;
      color: #ccc;
      border: 1px solid orange;
    }
    .comments {
      margin: 10px 0;
      padding: 10px;
      border: 1px solid #ddd;
      .comment_content {
        padding: 10px;
        border-bottom: 1px dashed #ddd;
      }
    }
  }
  .main {
    width: 700px;
  }
}
</style>
